.about-warp{
    width: 7.5rem;
}

.about-warp>div{
    font-size: 0;
}

.about-warp>div img{
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
    visibility: bottom;
}

.about-warp .paper,
.about-warp .music,
.about-warp .lab
{
   position: relative;
}

.about-warp .paper .code-btn{
    position: absolute;
    left: 6.7rem;
    top: 0.13rem;
    width: .56rem;
    height: .78rem;
}

.about-warp .music .code-btn{
    position: absolute;
    left:  6.7rem;
    top: 0.13rem;
    width: .56rem;
    height: .78rem;
}

.about-warp .lab .code-btn{
    position: absolute;
    left:  6.66rem;
    top: 3.05rem;
    width: .56rem;
    height: .78rem;
}

.music-code-mask,
.paper-code-mask,
.lab-code-mask{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}
.music-code-mask .music-code-content,
.paper-code-mask .paper-code-content,
.lab-code-mask .lab-code-content
{
    width: 5.35rem;
    height: 6.37rem;
}
.music-code-mask .music-code,
.paper-code-mask .paper-code,
.lab-code-mask .lab-code
{
    width: 5.35rem;
    height: 5.35rem;
}

.music-code-mask .music-code img,
.paper-code-mask .paper-code img,
.lab-code-mask .lab-code img
{
    width: 100%;
    height: 100%;
}

.music-code-mask .music-code-close,
.paper-code-mask .paper-code-close,
.lab-code-mask .lab-code-close
{
    width: .63rem;
    height: .63rem;
    margin: .39rem auto;
    background-image: url(./../img/code_close.png);
    background-size: .63rem .63rem;
}

.hide{
    display: none !important;
}

footer .footer-nav li.footer-nav-about{
    background-image: url(./../img/footer_nav_about_active.jpg);
}

.opener {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: 4px solid  #000000;
    border-right: 4px solid #000000;
    position: fixed;
    left: 50%;
    bottom: 1.04rem;
    margin-left: -10px;
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.7; /* 老版Mozilla */
    -khtml-opacity:0.7; /* 老版Safari */
    opacity: 0.7;
    /* -webkit-animation: opener .5s ease-in-out alternate infinite;
    animation: opener .5s ease-in-out alternate infinite;
    -webkit-transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
    transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s; */
}
/* @-webkit-keyframes opener {
    100% {
        bottom: 1.34rem
    }
}
@keyframes opener {
    100% {
        bottom: 1.34rem
    }
} */
.opener1 {
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: 4px solid  #000000;
    border-right: 4px solid #000000;
    position: fixed;
    left: 50%;
    bottom: 1.26rem;
    margin-left: -10px;
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.7; /* 老版Mozilla */
    -khtml-opacity:0.7; /* 老版Safari */
    opacity: 0.7;
    /* -webkit-animation: opener .5s ease-in-out alternate infinite;
    animation: opener .5s ease-in-out alternate infinite;
    -webkit-transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
    transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s; */
}